<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from "@vue/runtime-core";
import { NavType, GoodsType } from '@/typings';
import { useRouter } from "vue-router";
import { debounce } from 'lodash-es'
import Toast from "vant/lib/toast";
import 'vant/es/toast/style';

const homeNavArr = ref<NavType[]>([]);
const goodsListArr = ref<GoodsType[]>([])
const router = useRouter()
const loading = ref(true)
const loadingTwo = ref(false)
const page = ref(3)
const finished = ref(false)
const querys = ref('')

const goDetail = (itemIdUrl: string, actorIdUrl: string) => {
  router.push({
    path: '/detail',
    query: {
      itemIdUrl,
      actorIdUrl
    }
  })
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _debounce = debounce(goDetail)



const getHomeNav = () => {
  axios
    .get('https://apis.netstart.cn/mogujie/homeNav.json')
    .then((({ data }) => {
      homeNavArr.value = data.map((n: NavType) => {
        return {
          image: n.image,
          title: n.title,
        };
      });
      // console.log(data);
      // loading.value = false
    }))
}

const hotList = (item: string) => {
  querys.value = item
  router.push({ path: '/goods', query: { frontword: querys.value } })
}

// debounce(getHomeNav, 2000)

// const _debounce = debounce(getHomeNav)

const getGoods = () => {
  axios
    .get('https://apis.netstart.cn/mogujie/video/item?page=2')
    .then((({ data }) => {
      goodsListArr.value = data.data.list.map((g: GoodsType) => {
        return {
          itemIdUrl: g.itemIdUrl,
          actorIdUrl: g.actorIdUrl,
          itemImage: g.itemImage,
          actorAvatar: g.actorAvatar,
          actorName: g.actorName,
          actorTag: g.actorTag,
          title: g.title,
          discountPrice: g.discountPrice,
          bottomIcon: g.bottomIcon,
          sale: g.sale
        }
      })
      console.log(data);
      loading.value = false
    }))
}

const onRefresh = () => {
  setTimeout(() => {
    page.value++;
  }, 1000);
  axios
    .get(`https://apis.netstart.cn/mogujie/video/item?page=${page.value}`)
    .then(({ data }) => {
      goodsListArr.value = data.data.list.map((g: GoodsType) => {
        return {
          itemIdUrl: g.itemIdUrl,
          actorIdUrl: g.actorIdUrl,
          itemImage: g.itemImage,
          actorAvatar: g.actorAvatar,
          actorName: g.actorName,
          actorTag: g.actorTag,
          title: g.title,
          discountPrice: g.discountPrice,
          bottomIcon: g.bottomIcon,
          sale: g.sale
        }
      })
      Toast('刷新成功')
      loading.value = false
      console.log(data)
    })
}

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    page.value++
  }, 1000)
  axios
    .get(`https://apis.netstart.cn/mogujie/video/item?page=${page.value}`)
    .then(({ data }) => {
      goodsListArr.value = [...goodsListArr.value, ...data.data.list]
      loadingTwo.value = false
      console.log(data)
    })

};

onMounted(() => {
  getHomeNav()
  getGoods()
  // _debounce
})



</script>

<template>
  <div class="box">
    <van-pull-refresh v-model="loading" :finished="finished" @refresh="onRefresh">
      <div class="home-bar">

        <div class="bar-img" @click="$router.push({ path: '/taxonomic' })">
        </div>

        <div class="input-bar" @click="$router.push({ path: '/search' })">
          <span class="search">
            <img src="@/assets/img/search.png">
          </span>
          <input type="search" placeholder="ins超火短t">
        </div>
        <div class="message">
        </div>
      </div>

      <div class="home-nav">
        <div class="nav-list" v-for="(h, i) in homeNavArr" :key="i" @click="hotList(h.title)">
          <div class="nav-img">
            <van-image width="50" height="50" :src="h.image" />
            <!-- <img :src="h.image"> -->
          </div>
          <div class="item">{{ h.title }}</div>
        </div>
      </div>


      <van-list v-model:loading="loadingTwo" :finished="finished" @load="onLoad">
        <div class="content">
          <div class="content-box" v-for="(g, i) in goodsListArr" :key="i" @click="goDetail(g.itemIdUrl, g.actorIdUrl)">
            <div class="content-list">
              <div class="content-img">
                <!-- <img :src="g.itemImage"> -->
                <van-image :src="g.itemImage" />
                <div class="actor">
                  <div class="actor-img">
                    <!-- <img :src="g.actorAvatar"> -->
                    <van-image :src="g.actorAvatar" />
                  </div>
                  <span class="actor-name">{{ g.actorName }}</span>
                  <span class="actor-tag">{{ g.actorTag }}</span>
                </div>
              </div>
              <!-- {{ getDetails(g.itemIdUrl, g.actorIdUrl) }} -->
              <div class="title">{{ g.title }}</div>
              <div class="content-bottom">
                <div class="price">{{ g.discountPrice }}</div>
                <div class="bottom-icon">
                  <img :src="g.bottomIcon">
                </div>
                <div class="sale">{{ g.sale }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>

    </van-pull-refresh>
    <!-- <van-loading size="24px" vertical v-if="loading">加载中...</van-loading> -->
  </div>
</template>

<style lang="scss" scoped>
.box {
  background-color: #cccccc1f;
}

.home-bar {
  position: fixed;
  display: flex;
  align-items: center;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  background: white;
  justify-content: space-around;
  border-bottom: 1px solid #777;

  .bar-img {
    width: 50px;
    height: 30px;
    background: url(@/assets/img/top-bar.png) no-repeat center;
    background-size: 25px 20px;

  }

  .input-bar {
    position: relative;
    display: flex;

    .search {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 7px;
      left: 9px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    input {
      width: 256px;
      height: 30px;
      padding-left: 30px;
      border-radius: 5px;
    }


  }

  .message {
    width: 50px;
    height: 30px;
    background: url(@/assets/img/xiaoxi.png) no-repeat center;
    background-size: 25px 20px;

  }
}

:deep(.van-image__img) {
  width: 100%;
  height: 100%;
}

.home-nav {
  display: flex;
  flex-wrap: wrap;
  width: 94vw;
  padding-top: 55px;
  margin: 0 auto;
  margin-bottom: 10px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  background: white;

  .nav-list {
    display: flex;
    flex: 0 0 20%;
    width: 75px;
    height: 71px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .nav-img {
      width: 50px;
      height: 50px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .item {
      font-size: 13px;
      color: #777;
    }
  }
}

.content {
  width: 94vw;
  margin: 10px auto;
  column-count: 2;
  column-gap: 0;
  margin-bottom: 10px;
  vertical-align: top;


  .content-box {
    // display: flex;
    width: 100%;
    display: inline-block;



    .price {
      color: #FF4466;
    }

    .sale {
      padding: 3px 7px;
      background-color: #ffecef;
      color: #FF4466;
      font-size: 12px;
      border-radius: 6px;
    }

    .content-list {
      margin: 5px;
      background-color: #fff;



      .content-img {
        position: relative;
        margin-bottom: 10px;
        border-radius: 5px;
        overflow: hidden;
        width: 100%;
        break-inside: avoid;

        img {
          width: 100%;
          object-fit: contain;
        }

        .actor {
          position: absolute;
          display: flex;
          align-items: center;
          bottom: 8px;
          left: 2px;
          color: #fff;
          font-size: 12px;
          white-space: nowrap;

          .actor-img {
            width: 25px;
            height: 25px;
            border-radius: 999px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .actor-name {
            margin: 0 5px;
          }

          .actor-tag {
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 2px 5px;
          }
        }
      }

      .title {
        font-size: 12px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .content-bottom {
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
        padding-bottom: 10px;


        .bottom-icon {
          width: 22px;
          height: 12px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
